<template>
  <el-dialog :visible="childVisible"
             :before-close="close"
             width="56%"
             top="10vh"
             :close-on-click-modal="false"
             append-to-body>
    <div>
      <div class="cost-title">
        <div>合单报价 <span>(单位：元)</span></div>
      </div>
      <el-table border
                :data="oneBillData">
        <template v-for="(column, index) in oneBillColumn">
          <Column :key="index"
                  :input-limit="true"
                  :init-zero="true"
                  v-bind="column" />
        </template>
      </el-table>
    </div>
    <div class="mt10">
      <div class="cost-title">
        <div>补充费用 <span>(单位：元)</span></div>
      </div>
      <el-table border
                :data="surchargeFees"
                max-height="300">
        <template v-for="(column, index) in supplementColumn">
          <Column :key="index"
                  :input-limit="true"
                  :init-zero="column.name != 'remarks'"
                  v-bind="column" />
        </template>
      </el-table>
      <p class="fontSty1">
        报价费用+补充费用合计(含税费):
        <span class="fontSty2">{{ totalFee || 0 }}</span>
      </p>
    </div>
    <div class="mt10">
      <div class="cost-title">
        <div>付款方式 <span>(单位：元)</span></div>
      </div>
      <el-table border
                :data="payData">
        <template v-for="(column, index) in payColumn">
          <Column :key="index"
                  :input-limit="true"
                  :init-zero="true"
                  v-bind="column" />
        </template>
      </el-table>
    </div>
  </el-dialog>
</template>

<script>
import Column from "@views/quote/transport/components/Column.vue";
import { returnThousandDigit } from "@/libs/util.js";
import { quotation } from "@/api/index";
export default {
  name: "OneBillFeeDialog",
  components: {
    Column
  },
  props: {
    childVisible: {
      type: Boolean,
      default: false
    },
    combineId: {
      type: Number,
      default: null
    }
  },
  data () {
    return {
      oneBillColumn: [
        {
          label: "整车",
          name: "transportFee",
          type: "text"
        },
        {
          label: "装货费",
          name: "loadFee",
          type: "text"
        },
        {
          label: "卸货费",
          name: "unloadFee",
          type: "text"
        },
        {
          label: "提货费",
          name: "pickFee",
          type: "text"
        },
        {
          label: "送货费",
          name: "deliverFee",
          type: "text"
        },
        {
          label: "保险费",
          name: "insureFee",
          type: "text"
        },
        {
          label: "税费",
          name: "taxFee",
          type: "text"
        },
        {
          label: "报价费用",
          name: "quoteTotal",
          type: "total"
        }
      ],
      oneBillData: [],
      supplementColumn: [
        {
          label: "费用项",
          name: "typeName",
          type: "text"
        },
        {
          label: "备注信息",
          name: "remarks",
          type: "text"
        },
        {
          label: "补充费用",
          name: "money",
          type: "total"
        }
      ],
      surchargeFees: [],
      payColumn: [
        {
          label: "预付款",
          name: "prepayFee",
          type: "text"
        },
        {
          label: "货到付款",
          name: "arrivePayFee",
          type: "text"
        }
      ],
      payData: [],
      totalFee: 0
    };
  },
  created () {
    this.getOneBillFee();
  },
  methods: {
    // 列表查询
    async getOneBillFee () {
      const { data } = await quotation.onebillValidFee(this.combineId);
      let quoteTotal = 0;
      // 合单费用
      this.oneBillData = [{
        transportFee: data?.transportFee || 0,
        loadFee: data?.loadFee || 0,
        unloadFee: data?.unloadFee || 0,
        insureFee: data?.insureFee || 0,
        pickFee: data?.pickFee || 0,
        deliverFee: data?.deliverFee || 0,
        taxFee: data?.taxFee || 0
      }]
      for (let key in this.oneBillData[0]) {
        quoteTotal += this.oneBillData[0][key];
      }
      this.oneBillData[0].quoteTotal = quoteTotal;
      // 补充费用
      this.surchargeFees = data?.surchargeFees || [];
      let surchargeFeesTotal = 0;
      if (this.surchargeFees.length) {
        this.surchargeFees.forEach((element) => {
          surchargeFeesTotal += element.money || 0;
        });
      }
      // 付款方式
      this.payData = [{
        prepayFee: data?.prepayFee || 0,
        arrivePayFee: data?.arrivePayFee || 0
      }]
      // 总和
      // this.totalFee = returnThousandDigit(data?.totalFee, 2)
      this.totalFee = returnThousandDigit(Number(quoteTotal) + Number(surchargeFeesTotal), 2)
    },
    // 取消
    close () {
      this.$emit("update:childVisible", false);
    },
  }
};
</script>

<style lang="scss" scoped>
.mt10 {
  margin-top: 10px;
}
.cost-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  font-size: 16px;
  span {
    color: var(--prev-border-color-grey);
    font-size: 12px;
  }
}
.fontSty1 {
  color: var(--prev-color-text-ashes);
  display: flex;
  justify-content: flex-end;
  height: 40px;
  line-height: 40px;
}
.fontSty2 {
  color: var(--prev-color-primary);
  font-size: 20px;
  font-weight: bold;
  margin-left: 10px;
}
</style>
